<div class="importDatabase">
<div class="panel">
    <div class="panel-body">
        <form data-bind="submit: importDb">
            <div class="row">
                <div class="col-sm-8 col-lg-6">
                    <h3>Import data from a .ravendbdump file into the current database</h3>
                    <div class="bg-info text-info padding padding-xs margin-top margin-bottom">
                        <small><i class="icon-info"></i><span>Note: Importing will overwrite any existing documents and indexes.</span></small>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-8 col-lg-6">
                    <div class="input-group file-input" data-bind="validationElement: importedFileName">
                        <input type="file" accept=".ravendbdump" id="importDatabaseFilePicker" data-bind="event: { change: _.partial(fileSelected, $element.value) }, disable: isImporting" tabindex="-1" />
                        <span class="static-name form-control" data-bind="text: importedFileName() || 'Select file...'"></span>
                        <span class="input-group-btn">
                            <label for="importDatabaseFilePicker" class="btn btn-default">
                                <i class="icon-document"></i><span>Browse</span>
                            </label>
                        </span>
                        <p class="help-block" data-bind="validationMessage: importedFileName"></p>
                    </div>
                    <div class="text-warning bg-warning padding padding-xs margin-top flex-horizontal" data-bind="visible: isBackupFileType">
                        <div class="flex-start"><small><i class="icon-warning"></i></small></div>
                        <div>
                            <div><small>The selected file is a <strong>RavenDB Backup file</strong>.</small></div>
                            <div><small>Please use the <strong>Restore</strong> option (under Create New Database) in order to restore data from a RavenDB Backup file.</small></div>
                        </div>
                    </div>
                </div>
            </div>
            <div data-bind="with: model" class="margin-top">
                <div class="row">
                    <div class="col-lg-3">
                        <h4>Documents and Extensions:</h4>
                        <div class="margin-left">
                            <div class="toggle">
                                <input id="importDocuments" type="checkbox" data-bind="checked: includeDocuments" />
                                <label for="importDocuments">Include Documents</label>
                            </div>
                            <div class="margin-left">
                                <div class="toggle">
                                    <input id="importAttachments" type="checkbox"
                                           data-bind="checked: includeAttachments" />
                                    <label for="importAttachments">Include Attachments</label>
                                </div>
                                <div class="toggle">
                                    <input id="importLegacyAttachments" type="checkbox"
                                           data-bind="checked: includeLegacyAttachments" />
                                    <label for="importLegacyAttachments">Include Legacy Attachments</label>
                                </div>
                                <div class="toggle">
                                    <input id="importCounters" type="checkbox"
                                           data-bind="checked: includeCounters" />
                                    <label for="importCounters">Include Counters</label>
                                </div>
                                <div class="toggle">
                                    <input id="importTimeSeries" type="checkbox"
                                           data-bind="checked: includeTimeSeries" />
                                    <label for="importTimeSeries">Include Time Series</label>
                                </div>
                                <div class="toggle">
                                    <input id="importRevisions" type="checkbox" data-bind="checked: includeRevisionDocuments" />
                                    <label for="importRevisions">Include Revisions</label>
                                </div>
                            </div>
                            <div class="toggle">
                                <input id="importArtificialDocuments" type="checkbox" data-bind="checked: includeArtificialDocuments" />
                                <label for="importArtificialDocuments">Include Artificial Documents</label>
                                <small id="js-import-artificial-documents"><i class="icon-info text-info"></i></small>
                            </div>
                            <div class="toggle">
                                <input id="importArchivedDocuments" type="checkbox" data-bind="checked: includeArchivedDocuments" />
                                <label for="importArchivedDocuments">Include Archived Documents</label>
                            </div>
                            <div class="toggle">
                                <input id="importExpiredDocuments" type="checkbox" data-bind="checked: includeExpiredDocuments" />
                                <label for="importExpiredDocuments">Include Expired Documents</label>
                            </div>
                            <div class="toggle">
                                <input id="importConflicts" type="checkbox" data-bind="checked: includeConflicts" />
                                <label for="importConflicts">Include Conflicts</label>
                            </div>
                            <div class="toggle">
                                <input id="importDocumentsTombstones" type="checkbox" data-bind="checked: includeDocumentsTombstones" />
                                <label for="importDocumentsTombstones" class="margin-right margin-right-sm">Include Documents Tombstones</label>
                            </div>
                            <div class="toggle">
                                <input id="importTimeSeriesDeletedRanges" type="checkbox" data-bind="checked: includeTimeSeriesDeletedRanges" />
                                <label for="importTimeSeriesDeletedRanges" class="margin-right margin-right-sm">Include Time Series Deleted Ranges</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <h4>Cluster Entities:</h4>
                        <div class="margin-left">
                            <div class="toggle">
                                <input id="importIndexes" type="checkbox" data-bind="checked: includeIndexes, requiredAccess: 'DatabaseAdmin', requiredAccessOptions: { strategy: 'disable' }" />
                                <label for="importIndexes">Include Indexes</label>
                            </div>
                            <div class="margin-left">
                                <div class="toggle">
                                    <input id="toggleIndexHistory" type="checkbox"
                                           data-bind="checked: databaseModel.includeIndexHistory, enable: includeIndexes" />
                                    <label for="toggleIndexHistory">Include Index History</label>
                                </div>
                                <div class="toggle">
                                    <input id="importAnalyzers" type="checkbox"
                                           data-bind="checked: removeAnalyzers, enable: includeIndexes" />
                                    <label for="importAnalyzers">Remove Analyzers</label>
                                </div>
                            </div>
                            <div class="toggle">
                                <input id="importIdentities" type="checkbox" data-bind="checked: includeIdentities" />
                                <label for="importIdentities">Include Identities</label>
                            </div>
                            <div class="toggle">
                                <input id="importSubscriptions" type="checkbox" data-bind="checked: includeSubscriptions" />
                                <label for="importSubscriptions" class="margin-right margin-right-sm">Include Subscriptions</label>
                            </div>
                            <div class="flex-horizontal">
                                <div class="toggle">
                                    <input id="importConfiguration" type="checkbox" data-bind="checked: includeDatabaseRecord" />
                                    <label for="importConfiguration" class="margin-right margin-right-sm">Include Configuration and Ongoing Tasks</label>
                                </div>
                                <button class="btn btn-default btn-sm margin-right margin-right-sm" data-bind="enable: includeDatabaseRecord, click: $root.customizeConfigurationClicked">Customize</button>
                                <small id="js-ongoing-tasks-disabled"><i class="icon-info text-info"></i></small>
                            </div>
                            <div class="toggle">
                                <input id="importCmpXch" type="checkbox" data-bind="checked: includeCompareExchange" />
                                <label for="importCmpXch">Include Compare Exchange</label>
                            </div>
                            <div class="toggle">
                                <input id="importCmpXchTombstones" type="checkbox" data-bind="checked: includeCompareExchangeTombstones" />
                                <label for="importCmpXchTombstones" class="margin-right margin-right-sm">Include Compare Exchange Tombstones</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <div data-bind="validationElement: importDefinitionHasIncludes">
                            <div class="help-block" data-bind="validationMessage: importDefinitionHasIncludes"></div>
                        </div>
                    </div>
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="col-lg-6">
                    <div class="toggle">
                        <input id="toggleEncryption" type="checkbox" data-bind="checked: model.encryptedInput" />
                        <label for="toggleEncryption">Imported file is encrypted</label>
                    </div>
                </div>
            </div>
            <div class="margin-left" data-bind="collapse: model.encryptedInput">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group" data-bind="validationElement: model.encryptionKey">
                            <label class="control-label">
                                Encryption Key <small class="text-muted">(Base64 Encoding)</small>
                            </label>
                            <input type="text" class="form-control" placeholder="Key" autocomplete="off"
                                   data-bind="textInput: model.encryptionKey" />
                        </div>
                    </div>
                </div>
            </div>
            <div data-bind="collapse: showAdvancedOptions, with: model">
                <hr />
                <h3>Advanced</h3>
                <div class="margin-left">
                    <div class="margin-bottom">
                        <div class="toggle">
                            <input id="collections" type="checkbox" data-bind="checked: includeAllCollections" />
                            <label for="collections">Import all collections</label>
                        </div>
                        <div data-bind="collapse: !includeAllCollections()">
                            <div class="row margin-bottom">
                                <div class="flex-horizontal col-lg-3">
                                    <input class="form-control" placeholder="Enter a collection" autocomplete="off" data-bind="textInput: $root.inputCollection" />
                                    <button class="btn btn-info" data-bind="click: $root.addCollection, disable: !$root.inputCollection()">
                                        <i class="icon-plus"></i><span>Add Collection</span>
                                    </button>
                                </div>
                            </div>
                            <div class="margin-top margin-bottom" data-bind="visible: includedCollections().length">
                                <label>
                                    <strong>Collections Selected:</strong>
                                </label>
                                <div class="row">
                                    <div class="col-lg-3">
                                        <ul class="well collection-list" data-bind="foreach: includedCollections">
                                            <li>
                                                <div class="name" data-bind="text: $data"></div>
                                                <a title="Remove collection" href="#" data-bind="click: $root.removeCollection">
                                                    <i class="icon-trash"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="toggle">
                            <input id="useTransformScript" type="checkbox" data-bind="checked: $root.showTransformScript" />
                            <label for="useTransformScript" class="use-transform-script margin-right margin-right-sm">Use Transform script </label>
                            <small id="scriptPopover"><i class="icon-info text-info"></i></small>
                        </div>
                        <div data-bind="collapse: $root.showTransformScript">
                            <pre class="form-control" style="height: 200px;" data-bind="aceEditor: { code: transformScript, lang: 'ace/mode/javascript', completer: $root.completer }, validationOptions: { errorsAsTitle: false }, validationElement: transformScript"></pre>
                            <div data-bind="validationOptions: { errorsAsTitle: false }, validationElement: transformScript">
                                <div class="help-block" data-bind="validationMessage: transformScript"></div>
                            </div>
                        </div>
                        <div data-bind="with: databaseModel">
                            <div data-bind="compose: $root.smugglerDatabaseRecordView"></div>
                        </div>
                        <div class="toggle">
                            <input id="isSetMaxReadOpsPerSecond" type="checkbox" data-bind="checked: isSetMaxReadOpsPerSecond" />
                            <label for="isSetMaxReadOpsPerSecond" class="margin-right margin-right-sm">Set Max Read Operations Per Second </label>
                        </div>
                        <div data-bind="collapse: isSetMaxReadOpsPerSecond">
                            <div class="input-group margin-right">
                                <input id="maxReadOpsPerSecond" type="number" min="1" class="form-control input-border" data-bind="numericInput: maxReadOpsPerSecond" placeholder="Max read operations per second" />
                            </div>
                        </div>
                    </div>
                    <div class="flex-horizontal" data-bind="with: $root">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <span data-bind="text: getCommandTypeLabel(effectiveCommandType())"></span>
                                <span class="caret margin-left margin-left-xs"></span>
                            </button>
                            <ul class="dropdown-menu" data-bind="foreach: commandTypes">
                                <li><a href="#" data-bind="click: $root.effectiveCommandType.bind($root.effectiveCommandType, $data)"><span data-bind="text: $root.getCommandTypeLabel($data)"></span></a></li>
                            </ul>
                        </div>
                        <div class="flex-grow">
                            <input onClick="this.select();" class="form-control" readonly data-bind="value: effectiveCommand" />
                        </div>
                        <button class="btn btn-default" data-bind="click: copyCommandToClipboard" title="Copy import command to clipboard">
                            <i class="icon-copy-to-clipboard"></i>
                        </button>
                    </div>
                </div>
            </div>
            <hr />
            <div class="row" data-bind="collapse: model.itemsToWarnAbout">
                <div class="col-sm-8 col-lg-6">
                    <div class="bg-warning text-warning padding padding-xs margin-bottom flex-horizontal">
                        <div class="flex-start"><small><i class="icon-warning"></i></small></div>
                        <div>
                            <small>Note: You are importing <span data-bind="text: model.itemsToWarnAbout"></span> data without including the Documents.</small><br>
                            <small>You must verify that matching documents exist in the current database prior to importing.</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="progress" data-bind="visible: isUploading()">
                <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" data-bind="style: { width: uploadStatus() + '%' }"> <span class="sr-only" data-bind="text: uploadStatus() + '%'"></span> </div>
            </div>
            <button class="btn btn-default" type="button" data-bind="click: showAdvancedOptions.toggle.bind(showAdvancedOptions)">
                <span data-bind="text: showAdvancedOptions() ? 'Close ' : ''"></span>Advanced
            </button>
            <button class="btn btn-primary" type="submit" data-bind="css: { 'btn-spinner': isImporting() }"><span class="icon-import"></span><span>Import Database</span></button>
        </form>
    </div>
</div>
</div>
